
// 1. 引入
// 2. 创建实例对象
// 3. 配置路由信息
// 4. 导出实例对象
//  5. 挂载

// createWebHashHistory  一般在开发环境，路径带#
// createWebHistory    一般在线上环境，没有#
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// let routes = [{
//     path:'/',
//     component:()=>('@/view/Home.vue')
// }]

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        // 全部 路由懒加载;  component: () => ('组件名') 
        {
            path: '/',
            name: 'home',
            meta: { needCheckLogin: false, title: '首页' },
            component: () => import('@/views/Home.vue'),
        },
        {
            path: '/login',
            name: 'login',
            meta: { needCheckLogin: false, title: '登录' },
            component: () => import('@/views/Login.vue')
        },

        {
            path: '/cart',
            name: 'cart',
            meta: { needCheckLogin: true, title: '购物车' },
            component: () => import('@/views/Cart.vue')
        },
        {
            path: '/detail/:id',  //需要传递商品的id
            name: 'detail',
            meta: { needCheckLogin: true, title: '详情' },
            component: () => import('@/views/Detail.vue')
        },
        {
            path: '/notfound',
            name: 'notfound',
            component: () => import('@/views/NotFound.vue')
        },
        {
            path: '/order',
            name: 'order',
            component: () => import('@/views/Order.vue')
        },
        {
            path: '/search',
            name: 'search',
            component: () => import('@/views/Search.vue')
        },
        {
            path: '/user',
            name: 'user',
            meta: { needCheckLogin: true, title: '我的' },
            component: () => import('@/views/User.vue')
        },
        {
            path: '/city',
            name: 'city',
            component: () => import('@/views/City.vue')
        },

        {
            path: '/register',
            name: 'register',
            component: () => import('@/views/Register/index.vue'),
            redirect: '/register/tel',  //重定向
            children: [
                { path: 'tel', component: () => import('@/views/Register/InputTel.vue') },
                { path: 'code', component: () => import('@/views/Register/SendCode.vue') },
                { path: 'password', component: () => import('@/views/Register/SetPw.vue') },

            ]
        },
        {
            path: '/address',
            name: 'address',
            component: () => import('@/views/Address.vue'),
            meta: { needCheckLogin: true, title: '地址' },
        },
        {

            path: '/address/edit',
            meta: { needCheckLogin: true, title: '增加地址' },
            component: () => import('@/components/AddressEdit.vue')
        },
    ]
})

// 前置钩子
router.beforeEach((to, from, next) => {
    // console.log(to,888888);

    // 1. 不需要检查登录状态的页面  
    // needCheckLogin为 false，不需要检查；needCheckLogin为 true，需要检查
    if (!to.meta.needCheckLogin) {
        next()
    } else {
        // 2. 需要检查登录状态
        //  2.1 有登录信息
        if (localStorage.getItem('token') && localStorage.getItem('userid')) {
            next()
        } else {
            //  2.2 没有登录信息
            next('/login')
        }
    }
})

// 跳转后 触发的事件  ==》 后置路由守卫
router.afterEach((to, from) => {
    // alert(`${from.fullPath}到${to.fullPath}`);

    (document as any).title = to.meta.title  //动态更改标题（网页上的）
})

export default router;
